<template>
  <div class="info-detail-container">
    <div class="info-detail">
      <div class="info-detail-header">
        <Avatar :info="userInfo" />
      </div>
      <div class="info-detail-content" v-if="data">
        <Content :data="data" />
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { onMounted, ref, reactive } from 'vue'
import Avatar from './avatar.vue'
import Content from './content.vue'
import { getInfoDetailAPI } from '@/api/info'

const route = useRoute()
const id = route.params.id
// console.log(id, 'id')
const userInfo = ref({})
const data = ref({})
const getInfoDetail = async () => {
  const res = await getInfoDetailAPI({ id: parseInt(id) })
  console.log(res)
  if (res.code === 200) {
    userInfo.value = res.data.authorVo
    data.value = res.data
  }
}
onMounted(async () => {
  await getInfoDetail()
})
</script>
<style lang="scss" scoped>
.info-detail-container {
  width: 100%;
  min-height: 100vh;
  // display: flex;
  // justify-content: center;
  // align-items: center;
  background: #f5f7ff;
  padding: 20px;
}
.info-detail {
  display: flex;
  // flex-direction: column;
  // align-items: center;
  justify-content: center;
}
</style>
